// 组件通信
import React from "react"
// 1. 为什么要通信？
// 组件封闭的单元  只能控制自己的数据修改  vue-data  react-state

// 因为组件之间不可避免数据之间的流转 -> 组件通信的机制

// 2. 组件嵌套关系
// 父子 - props + $emit
// 兄弟 - eventBus + vuex + 公共的父组件
// 其他关系 - vuex

// App -> Son

// 3. 父传子 
// 1. 子组件身上绑定一个prop属性 名称可以自定义 值就是要传递的数据
// 2. 给函数组件添加一个名称为props的参数 里面存放着父传子传入的所有的数据 可以通过点语法使用
// 也可以通过解构赋值进行使用[更常用]
// 3. 如果子组件是一个类组件的话 父传子传下来的数据会被自动绑定到this.props对象上

// 4. 父组件状态更新引起子组件重新渲染 
// 注意: 父组件的数据变化引发子组件更新 [react这边不是精准更新 不管子组件有没有接受父组件传下来的数据
// 只要父组件进行了更新 子组件就会无脑进行重新渲染]

const Son = ({ title }) => {
  // props是一个对象 里面存放着父传子传下来的所有的数据
  console.log('子组件更新了')
  return <div>this is son,父组件传入的数据为{title}</div>
}

class SonComponent extends React.Component {
  render () {
    const { message } = this.props
    return (
      <div>我是类子组件{message}</div>
    )
  }
}

// 根组件App
class App extends React.Component {
  state = {
    message: 'this is app message',
    title: 'this is app title'
  }

  changeState = () => {
    this.setState({
      message: 'this is new message',
      title: 'this is new titlle'
    })
  }

  render () {
    return (
      <div>
        <Son message={this.state.message} title={this.state.title} />
        <SonComponent message={this.state.message} />
        <button onClick={this.changeState}>change</button>
      </div>
    )
  }
}


export default App